<script setup>
import { ref, nextTick, watch  } from 'vue'
import ChannelSelect from './ChannelSelect.vue'
import { Plus } from '@element-plus/icons-vue'
import { commodityPublishService,commodityGetDetailService } from '@/api/commodity.js'
import { getChilderen } from '@/api/cate'
import { baseURL } from '@/utils/request'
const cSortid = ref()
const visibleDrawer = ref(false)
const imgUrl = ref('')
const cCateList = ref()
const artList = ref({
  name: '',
  image: '',
  price: '',
  description: '',
  status: '',
  sortId: '',
  cSortId: '',
  number: ''
})
const defaultForm = ref({
  name: '',
  image: '',
  price: 0,
  description: '',
  status: '',
  sortId: '',
  cSortId: '',
  number: ''
})
const editorRef = ref()
const open = async (row) => {
  visibleDrawer.value = true
  if (row.id) {
    const res = await commodityGetDetailService(row.id)
    artList.value = res.data.data
    imgUrl.value = artList.value.image
    console.log("article.value是---",artList.value);
    
  } else {
  artList.value = { ...defaultForm }
  artList.value.number = 1
  artList.value.price = 0
  console.log(`output->artList.value`, artList.value)
  imgUrl.value = ''
  nextTick(() => {
    editorRef.value.setHTML('')
  })
  }
}
const emit = defineEmits(['success'])
defineExpose({
  open
})
// const rules = {
//   title: [
//     { required: true, message: '请输入分类名称', trigger: 'blur' },
//     {
//       pattern: /^\S{1,15}$/,
//       message: '分类名必须是1-10位的非空字符',
//       trigger: 'blur'
//     }
//   ],
//   cate_id: [{ required: true, message: '请输入分类别名', trigger: 'blur' }],
//   imgUrl: [{ required: true, message: '请输入分类别名', trigger: 'blur' }],
//   content: [{ required: true, message: '请输入分类别名', trigger: 'blur' }]
// }

const onUploadFile = (uploadFile) => {
  imgUrl.value = URL.createObjectURL(uploadFile.raw)
  artList.value.imageFile = uploadFile.raw
}
const onPublish = async (state) => {
  artList.value.status = state
  const fd = new FormData()
  for (let key in artList.value) {
    fd.append(key, artList.value[key])
  }
  // if (artList.value.id) {
  //   await artEditService(fd)
  //   ElMessage.success('编辑成功')
  //   visibleDrawer.value = false
  //   emit('success', 'edit')
  // } else {
  await commodityPublishService(fd)
  ElMessage.success('添加成功')
  visibleDrawer.value = false
  emit('success', 'add')
  }
// }
const getChilderenList  = async (id) => {
  if (!id) return
  const { data } = await getChilderen(id)
  cCateList.value = data.data
  console.log('sortId changed from-------------', cCateList.value)
} 
getChilderenList()
watch(
  () => artList.value.sortId,
  (newVal, oldVal) => {
    console.log('newVal', newVal, 'oldVal', oldVal);
    
    getChilderenList(newVal)
    console.log('sortId changed from', cCateList.value)
    // 在这里添加你需要执行的逻辑
  }
)
</script>
<template>
  <el-drawer
    v-model="visibleDrawer"
    title="新增商品"
    direction="rtl"
    size="50%"
  >
    <el-form
      ref="formRef"
      :model="artList"
      label-width="100px"
      style="padding-right: 30px"
    >
      <el-form-item label="商品名称" prop="name">
        <el-input
          v-model="artList.name"
          minlength="1"
          maxlength="30"
        ></el-input>
      </el-form-item>
     
      <el-form-item label="商品数量" prop="number">
        <el-input-number v-model="artList.number" :min="1" :max="10000" />
      </el-form-item>
      <el-form-item label="商品单价" prop="price">
        <el-input-number v-model="artList.price" :min="1" :max="100000" />
      </el-form-item>
      <el-form-item label="商品分类" prop="sortId">
        <ChannelSelect
          name="商品分类"
          v-model="artList.sortId"
          style="--el-select-width: 180%"
        ></ChannelSelect>
      </el-form-item>
      <el-form-item label="商品子分类" prop="sortId">
        <el-select
          v-model="artList.cSortId"
          :placeholder="`请选择商品子分类`"
        >
          <el-option
            v-for="list in cCateList"
            :key="list.id"
            :label="list.name"
            :value="list.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品封面" prop="image">
        <el-upload
          class="avatar-uploader"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="onUploadFile"
        >
          <img v-if="imgUrl" :src="imgUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品介绍" prop="description">
        <div class="editor">
          <quill-editor
            ref="editorRef"
            theme="snow"
            v-model:content="artList.description"
            contentType="html"
          >
          </quill-editor>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button @click="onPublish('已发布')" type="primary">发布</el-button>
        <el-button @click="onPublish('草稿')" type="info">草稿</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style scoped lang="scss">
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
